<template>
	<view class="container">
		<u-navbar title="新增地址"></u-navbar>
		<form @submit="saveData" report-submit="true">
			<view class="address-cont-title b-f b-b">
				<view class="list address-box dis-flex b-b">
					<view class="left-name"><text class="f-30">收货人</text></view>
					<view class="right-cont flex-box"><input name="name" placeholder="请输入收货人姓名" v-model="name" /></view>
				</view>
				<view class="list address-box dis-flex">
					<view class="left-name"><text class="f-30">手机号</text></view>
					<view class="right-cont flex-box"><input name="phone" placeholder="请输入收货人联系电话" type="number" v-model="phone" /></view>
				</view>
			</view>
			<view class="address-cont-title b-f b-b">
				<view class="dis-flex list address-box m-top20 b-b">
					<view class="left-name"><text class="f-30">所在地区</text></view>
					<view class="address-cont-box flex-box" @tap.stop="regionShow = true">
						<text v-if="region" class="f-30">{{ region }}</text>
						<text v-else class="f-30 col-7">选择省、市、区</text>
					</view>
				</view>
				<view class="list address-box dis-flex">
					<view class="left-name"><text class="f-30">详细地址</text></view>
					<view class="right-cont flex-box"><input name="detail" placeholder="请输入街道小区楼层" type="text" v-model="detail" /></view>
				</view>
			</view>
			<view class="padding-box m-top35 profile-btn"><button formType="submit" :disabled="disabled">保存</button></view>
		</form>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="regionList" @confirm="confirmRegion"></u-select>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			regionShow: false,
			name: '',
			regionList: [],
			phone: '',
			detail: '',
			disabled: false,
			error: '',
			region: '',
			value: {}
		};
	},
	onLoad() {
		this.$u.api.getRegionList().then(res => {
			this.regionList = res.data.data;
		});
	},
	methods: {
		/**
		 * 表单提交
		 */
		saveData(e) {
			let values = e.detail.value;
			values.region = this.region.split(' ').join(',');
			// 表单验证
			if (!this.validation(values)) {
				Tools.showError(this.error);
				return false;
			}
			this.disabled = true;
			// 提交到后端
			this.$u.api
				.addAddress(values)
				.then(res => {
					this.$u.toast('保存成功');
					setTimeout(() => {
						this.navigateBack();
					}, 1500);
				})
				.catch(e => {
					this.disabled = false;
				});
		},
		validation(values) {
			if (values.name === '') {
				this.error = '收件人不能为空';
				return false;
			}

			if (!this.$u.test.mobile(values.phone)) {
				this.error = '手机号不符合要求';
				return false;
			}

			if (!this.region) {
				this.error = '省市区不能空';
				return false;
			}
			if (values.detail === '') {
				this.error = '详细地址不能为空';
				return false;
			}
			return true;
		},
		confirmRegion(e) {
			const regionList = [];
			for (let i = 0; i < e.length; i++) {
				regionList.push(e[i].label);
			}
			this.region = regionList.join(' ');
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 750rpx;
	overflow: hidden;
}
.profile-list {
	.admin {
		padding-left: 15px;
		font-size: 30rpx;
		color: #333;
	}
}
.address-box {
	.left-name {
		width: 85px;
	}
	.right-cont {
		input {
			height: 52rpx;
			width: 100%;
			font-size: 30rpx;
			color: #444;
		}
	}
}
.address-cont-title {
	.list {
		width: auto;
		padding: 24rpx;
	}
}

.m-top10 {
	margin-top: 10rpx;
}

.m-top20 {
	margin-top: 25rpx;
}

.m-top35 {
	margin-top: 35rpx;
}
</style>
